<script setup>
import useDragAndDrop from './useDnD.js'

defineProps(['inputs', 'gateways', 'outputs'])
const { onDragStart } = useDragAndDrop()
</script>

<template>
  <q-list class="nodes q-px-md unselectable">
    <q-item-label header style="color: #cbcbcb">inputs</q-item-label>
    <q-item
      dark
      v-for="plugin in inputs"
      :key="plugin.id"
      :class="`q-my-md node-` + plugin.type"
      :draggable="true"
      @dragstart="onDragStart($event, plugin)"
    >
      <q-item-section>
        <q-item-label>{{ plugin.id }}</q-item-label>
      </q-item-section>
    </q-item>
    <q-item-label header style="color: #cbcbcb">gateways</q-item-label>
    <q-item
      dark
      v-for="plugin in gateways"
      :key="plugin.id"
      :class="`q-my-md node-` + plugin.type"
      :draggable="true"
      @dragstart="onDragStart($event, plugin)"
    >
      <q-item-section>
        <q-item-label>{{ plugin.id }}</q-item-label>
      </q-item-section>
    </q-item>
    <q-item-label header style="color: #cbcbcb">outputs</q-item-label>
    <q-item
      dark
      v-for="plugin in outputs"
      :key="plugin.id"
      :class="`q-my-md node-` + plugin.type"
      :draggable="true"
      @dragstart="onDragStart($event, plugin)"
    >
      <q-item-section>
        <q-item-label>{{ plugin.id }}</q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
</template>

<style scoped></style>
